
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bradesco Worklight</title>
		<link rel="stylesheet" href="css/bradesco.min.css" />
		<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
		<script src="js/jquery-1.8.1.min.js"></script>
		<script src="js/jquery.mobile-1.3.0.min.js"></script>
		<script src="js/mobiscroll.datetime-2.4.min.js"></script>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/mobiscroll.datetime-2.4.min.css" />
		<script src="js/main.js"></script>
	</head>
	<body>
		<div data-role="page" data-theme="a" id="loginPage" class="pageBradesco">
			<div id="header" data-role="header" data-position="fixed">				
				<h1 class="headerBradesco">Bradesco</h1>
			</div>
			<div data-role="content" data-theme="a">
				<h3>Login:</h3>
				<div data-role="fieldcontain" class="ui-shadow">
					<form id="login" name="login">
						<div class="ui-grid-a">
							<div class="ui-block-a">
								<input type="number" pattern="[0-9]{4}" required size="4" maxlength="4" placeholder="Agência" data-clear-btn="true" id="agencia" name="agencia" />
								<div class="subcell">
									<input type="password" pattern="[0-9]{4}" required maxlength="4" placeholder="Senha" data-clear-btn="true" id="pass" name="pass" />
								</div>
							</div>
							<div class="ui-block-b">
								<input type="number" pattern="[0-9]{6}" required size="6" maxlength="6" placeholder="Conta" data-clear-btn="true" id="conta" name="conta" />
								<div class="subcell">
								<input type="submit" value="Entrar" id="entrar" name="entrar" data-theme="d" />
							</div>
							</div>
						</div>
					</form>
				</div>
				<br />
				<br />
				<br />
				<div id="sCont">
					<ul data-role="listview" data-inset="true" data-theme="d">
					    <li><a href="#"><img src="images/icons/75-phone-c.png" alt="France" class="ui-li-icon ui-corner-none">Telefones Úteis</a></li>
					    <li><a href="#"><img src="images/icons/16-line-chart-c.png" alt="Germany" class="ui-li-icon ui-corner-none">Indicadores Financeiros</a></li>
					</ul>
				</div>
			</div>
			<div data-role="footer" id="footer" data-id="footer" data-position="fixed" class="nav-bradesco ui-footer ui-bar-d">
				<div data-role="navbar" class="nav-bradesco ui-navbar ui-mini" data-theme="d" role="navigation">
					<ul>
						<li><a id="menu" onclick="$.mobile.changePage('menu.html')" data-icon="custom">Menu</a></li>
						<li><a id="subscribe" data-icon="custom">Subscribe</a></li>
						<li><a id="mapa" onclick="$.mobile.changePage('mapa.html')" data-icon="custom">Mapa</a></li>
						<li><a id="token" onclick="generateToken();" data-icon="custom">Token</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>